<template>
    <div>
        <div id="radar_canvas" class="echart" style="width: 300px;height: 240px;"></div>
    </div>
</template>
<script>
let me;
export default {
    created() {
    },
    mounted() {
        me = this;
        me.$nextTick(function () {
            me.initRadar()
        })
    },
    methods: {
        initRadar() {
            let charts = me.$echarts.init(document.getElementById('radar_canvas'));
            var option = {
                title: {
                    textAlign: 'left',
                },
                calculable: true,
                radar: {
                    splitNumber: 4,
                    shape: 'circle',
                    name: {
                        formatter: '{b|{value}}',
                        rich: {
                            a: {
                                color: 'rgba(5, 193, 174, 1)',
                                align: 'middle'
                            },
                            b: {
                                color: '#333'
                            },
                        }
                    },
                    axisLine: {//(圆内的几条直线)坐标轴轴线相关设置
                        lineStyle: {
                        	color: '#ededed', // 坐标轴线线的颜色。
                        	width: 1, // 坐标轴线线宽。
                        	type: 'solid', // 坐标轴线线的类型。
                        }
                    },
                    center: ['50%', '50%'],
                    radius: '50%',
                    startAngle: 90,
                    indicator: [
                        {
                            name: '词汇词组',
                            max: 100
                        },
                        {
                            name: '语法句子',
                            max: 100
                        },
                        {
                            name: '内容立意',
                            max: 100
                        },
                        {
                            name: '篇章结构',
                            max: 100
                        },
                        {
                            name: '哈哈哈',
                            max: 100
                        }
                    ],
                    splitArea: {
                        show: false
                    },
                    // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
                    splitLine: {
                        lineStyle: {
                        color: '#ededed', // 设置网格的颜色
                        },
                    },
                },
                series: [{
                    type: 'radar',
                    symbol: "none",
                    lineStyle: {
                        color: 'rgba(5, 193, 174, .1)'
                    },
                    areaStyle: {
                      color: 'rgba(5, 193, 174, 1)'//选择区域颜色
                    },
                    data: [{
                        value: [50, 100, 50, 50, 100]
                    }]
                }]
            }
            charts.setOption(option);
        }
    },
}
</script>